<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>The Chord Playground!</title>
        <script src="jquery.js"> </script>
        <script src="soundmanager.js"> </script>
        <script src="sound.js"> </script>

        <style>
            html {
                font-family: "courier new","lucida console";
                background-color: #bada95;
            }

            p {
                font-size: 0.9em;
            }


            #wrapper {
                width: 44em;
                margin: 0 auto;
                height: 48em;
                border: 1px solid black;
            }

            #contentWrapper {
                width: 44em;
                margin: 0 auto;
                height: 44em;
                background-color: white;
                border: 1px solid red;
            }

            #content {
                /* border: 1px solid red; */
                float: left;
                width: 28em;
                height: 32em;
                clear: left;
            }

             #funtextarea {
                float: left;
                width: 26em;
                clear: left;
                height: 8em;
                margin: 0.5em;
                padding: 0.3em;
            }
            #submitfun {
                float: left;
                width: 26em;
                clear: left;
                height: 2em;
                margin: 0.5em;
                padding: 0.3em;
            }

            #buttons {
                float: left;
                width: 26em;
                clear: left;
                height: 2em;
                margin: 0.5em;
                padding: 0.3em;
            }

            #buttonButtons {
                width: 3em;
            }

            #information {
                float: left;
                /* border: 1px solid yellow; */
                width: 26em;
                clear: left;
                height: 10em;
                margin: 0.5em;
                padding: 0.2em;
            }

             #chordImg {
                float: left;
                /* border: 1px solid yellow; */
                width: 26em;
                clear: left;
                height: 14em;
                margin: 0.5em;
                padding: 0.2em;
            }

            #footer {
                float: left;
                width: 42em;
                clear: left;
                height: 2em;
                /* border: 1px solid black; */
                margin: 0.5em;
                padding: 0.1em;
            }

            #options {
                /* border: 1px solid black; */
                float: right;
                width: 15em;
                height: 7em;
                clear: right;
                padding: 0.3em;
            }

            #previous-chord-header {
                /* border: 1px solid black; */
                float: right;
                width: 15em;
                height: 5em;
                clear: right;
                padding: 0.3em;
            }

            #previous-chord {
                /* border: 1px solid black; */
                float: right;
                width: 15em;
                height: 15em;
                clear: right;
                padding: 0.3em;
            }

        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="contentWrapper">
                <div id="content">
                    <div id="information">
                        <h1>Chord playground!™</h1>
                        <p>Practice pad before doing the <a href="http://saiboten.com/chordquiz">"Guess that chord"</a> quiz.</p>
                        <p>Select a chord, it will play and display how the chord is held.</p>
                    </div>
                    
                    <div id="chordImg"> </div>
                    <div id="buttons"></div>
                    <div id="funtextarea"><textarea id="textarea" rows="8" cols="70"></textarea></div>
                    <div id="submitfun"><input type='button' value='Play thing' onclick='playFun()'> </input></div>
                </div>
                <div id="options"><h2>Links</h2><a href="http://saiboten.com/chordquiz">Guess that chord</a></div>
                <div id="previous-chord-header"><h2>Last played chords</h2></div>
                <div id="previous-chord"> </div>
            </div>
            <div id="footer"><p>©saiboten.com - For questions and comments, please visit saiboten.com.</p></div>
        </div>


        <script type="text/javascript">
            var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
            document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
        </script>
        <script type="text/javascript">
            try {
                var pageTracker = _gat._getTracker("UA-9102904-1");
                pageTracker._trackPageview();
            } catch(err) {}</script>
    </body>
</html>
